<html>  
  <head>  
        <meta charset="utf-8">  
        <title>7.1.4.2 过渡的call</title>  
  </head> 
  <style>
  .axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
 
.axis text {
	font-family: sans-serif;
	font-size: 11px;
}
  </style>
<body>

<script src="../../d3/d3.min.js" charset="utf-8"></script> 
<script>  

var width  = 500;	//SVG绘制区域的宽度
var height = 500;	//SVG绘制区域的高度
	
var svg = d3.select("body")			//选择<body>
			.append("svg")			//在<body>中添加<svg>
			.attr("width", width)	//设定<svg>的宽度属性
			.attr("height", height);//设定<svg>的高度属性
			
var xScale = d3.scale.linear()
				.domain([0,10])
				.range([0,300]);
				
var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom");
				
var g = svg.append("g")
			.attr("class","axis")
			.attr("transform","translate(50,200)")
			.call(xAxis);

xScale.domain([0,50]);
			
g.transition()
	.duration(2000)
	.call(xAxis);
		

</script> 

</body>

</html> 